import React, { useState, useEffect } from 'react'
import { CSSTransition } from 'react-transition-group'
import PropTypes from 'prop-types';
import { LOAD_STATE } from '@util/state.js'
import './sketch.scss'

export const Sketch = props => {

    const { 
        children,
        mask,
    } = props
    
    const [ready, setReady] = useState(false)

    useEffect(() => {

        if(props.show === LOAD_STATE.LOADING) {
            setReady(false)
        }
    }, [props.show])

    const render = () => {
        return <div style={{position: "relative"}}>
                    {!ready && <CSSTransition
                                    in={
                                        props.allowErr ? ((props.show === LOAD_STATE.SUCCESS) || (props.show === LOAD_STATE.FAILED)) : (props.show === LOAD_STATE.SUCCESS)
                                    }
                                    onEntered={el => {
                                        setReady(() => true)
                                    }}
                                    
                                    classNames="fade"
                                    timeout={1200}
                                    appear={true}
                                >
                                    {mask}
                                </CSSTransition>}
                    { children }
                </div>
    }

    return render() 
           
}

Sketch.propTypes = {
    show: PropTypes.string,
}  

Sketch.defaultProps = {
    show: LOAD_STATE.LOADING
}

export default Sketch